<%@ page language="java" contentType="text/html; charset=utf8"
    pageEncoding="utf8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.easytopit.demo.domain.Movie"%>
<!doctype html>
<html>
<head>
	<!-- Basic Page Needs -->
        <meta charset="utf-8">
        <title>订单中心</title>
        <meta name="description" content="A Template by Gozha.net">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Gozha.net">
    
    <!-- Mobile Specific Metas-->
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="telephone=no" name="format-detection">
    
    <!-- Fonts -->
        <!-- Font awesome - icon font -->
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <!-- Roboto -->
        <link href='http://fonts.useso.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    
    <!-- Stylesheets -->

        <!-- Mobile menu -->
        <link href="css/gozha-nav.css" rel="stylesheet" />
        <!-- Select -->
        <link href="css/external/jquery.selectbox.css" rel="stylesheet" />
    
        <!-- Custom -->
        <link href="css/style.css?v=1" rel="stylesheet" />

        <!-- Modernizr --> 
        <script src="js/external/modernizr.custom.js"></script>
        <script type="text/javascript">
		  	${mes}
		</script>
		<style type="text/css">
			#search-form{
				width:800px;
				float:left;
				position: relative;
				top: 25px;
				margin-bottom:20px;
			}
			input{
				height:30px;
			}
			.search .search__button{
				top:-3px;
				right:-52px;
				height:35px;
			}
			.page-heading{
				margin-top: 86px;
			}
		</style>
</head>

<body>
    <div class="wrapper">
        <!-- Header section -->
        <header class="header-wrapper">
            <div class="container">
                <!-- Logo link-->
                <a href='index.html' class="logo">
                    <img alt='logo' src="images/logo.png">
                </a>
                <!-- Main website navigation-->
                <nav id="navigation-box">
                    <!-- Toggle for mobile menu mode -->
                    <a href="#" id="navigation-toggle">
                        <span class="menu-icon">
                            <span class="icon-toggle" role="button" aria-label="Toggle Navigation">
                              <span class="lines"></span>
                            </span>
                        </span>
                    </a>
                </nav>
                <!-- Additional header buttons / Auth and direct link to booking-->
                <div class="control-panel">
                    <a href="/login.do?name=${name}&passwd=${passwd}" class="btn btn-md btn--warning btn--book">首页</a>
                </div>

            </div>
        </header>
        
        <!-- Main content -->
        <section class="container">
            <div class="overflow-wrapper">
                <div class="col-sm-12">
	                <form id='search-form' action="/searchOrder.do" method='post' class="search">
	                    <input type="text" name="num" placeholder="订单号">
	                    <input type="text" name="payStatus" placeholder="支付状态">
						<input type="text" name="createTime" placeholder="生成时间">-<input type="text" name="endTime" placeholder="结束时间">
						<input type="text" name="cinema" placeholder="影院名称">
	                    <button type='submit' class="btn btn-md btn--danger search__button">查询</button>
	                </form>
                    <h2 class="page-heading">我的订单</h2>
                    <c:forEach var="order" items="${orders}">
	                    <!-- News post article-->
	                    <article class="post post--news">
	                        <h3><a href="/queryMovieByName.do?name=${order.movieName}" class="post__title-link">${order.movieName}</a></h3>
	                        <div class="wave-devider"></div>
	                        <p class="post__text">单号: ${order.num}</p>
							<p class="post__text">影院: ${order.cinema}</p>
							<p class="post__text">影厅: ${order.hall}</p>
							<p class="post__text">版本: ${order.movieVersion}</p>
							<p class="post__text">场次: ${order.movieTime}</p>
							<p class="post__text">座位: ${order.info}</p>
							<p class="post__text">数量: ${order.quantity}</p>
							<p class="post__text">单价: ${order.price}</p>
							<p class="post__text">金额: ${order.money}</p>
							<p class="post__text">生成时间: ${order.createTime}</p>
							<p class="post__text">结束时间: ${order.endTime}</p>
							<p class="post__text">支付状态: ${order.orderStatus}</p>
							<p class="post__text">订单状态: ${order.payStatus}</p>
	                        <div class="tags">
                               <ul>
                                   <li class="item-wrap"><a href="/checkInfo.do?num=${order.num}" class="tags__item">支付</a></li>
                                   <li class="item-wrap"><a href="/refundOrder.do?num=${order.num}" class="tags__item">退订</a></li>
                               </ul>
	                        </div>

	                        <div class="devider-huge"></div>
	                    </article>
                    </c:forEach>
                    <!-- end news post article-->

                    <div class="pagination">
                        <a href='#' class="pagination__prev">上一页</a>
                        <a href='#' class="pagination__next">下一页</a>
                    </div>

                </div>
            </div>
        </section>
        
        <div class="clearfix"></div>

        <footer class="footer-wrapper">
            <section class="container">
                <div class="col-xs-4 col-md-2 footer-nav">
                    <ul class="nav-link">
                        <li><a href="#" class="nav-link__item">Cities</a></li>
                        <li><a href="movie-list-left.html" class="nav-link__item">Movies</a></li>
                        <li><a href="trailer.html" class="nav-link__item">Trailers</a></li>
                        <li><a href="rates-left.html" class="nav-link__item">Rates</a></li>
                    </ul>
                </div>
                <div class="col-xs-4 col-md-2 footer-nav">
                    <ul class="nav-link">
                        <li><a href="coming-soon.html" class="nav-link__item">Coming soon</a></li>
                        <li><a href="cinema-list.html" class="nav-link__item">Cinemas</a></li>
                        <li><a href="offers.html" class="nav-link__item">Best offers</a></li>
                        <li><a href="news-left.html" class="nav-link__item">News</a></li>
                    </ul>
                </div>
                <div class="col-xs-4 col-md-2 footer-nav">
                    <ul class="nav-link">
                        <li><a href="#" class="nav-link__item">Terms of use</a></li>
                        <li><a href="gallery-four.html" class="nav-link__item">Gallery</a></li>
                        <li><a href="contact.html" class="nav-link__item">Contacts</a></li>
                        <li><a href="page-elements.html" class="nav-link__item">Shortcodes</a></li>
                    </ul>
                </div>
                <div class="col-xs-12 col-md-6">
                    <div class="footer-info">
                        <p class="heading-special--small">A.Movie<br><span class="title-edition">in the social media</span></p>

                        <div class="social">
                            <a href='#' class="social__variant fa fa-facebook"></a>
                            <a href='#' class="social__variant fa fa-twitter"></a>
                            <a href='#' class="social__variant fa fa-vk"></a>
                            <a href='#' class="social__variant fa fa-instagram"></a>
                            <a href='#' class="social__variant fa fa-tumblr"></a>
                            <a href='#' class="social__variant fa fa-pinterest"></a>
                        </div>
                        
                        <div class="clearfix"></div>
                        <p class="copy">&copy; A.Movie, 2013. All rights reserved. Done by Olia Gozha</p>
                    </div>
                </div>
            </section>
        </footer>
    </div>

	<!-- JavaScript-->
        <!-- jQuery 1.9.1--> 
        <script src="http://ajax.useso.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/external/jquery-1.10.1.min.js"><\/script>')</script>
        <!-- Migrate --> 
        <script src="js/external/jquery-migrate-1.2.1.min.js"></script>
        <!-- Bootstrap 3--> 
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

        <!-- Mobile menu -->
        <script src="js/jquery.mobile.menu.js"></script>
         <!-- Select -->
        <script src="js/external/jquery.selectbox-0.2.min.js"></script>

        <!-- Twitter feed -->
        <script src="js/external/twitterfeed.js"></script>
		
		<!-- Form element -->
        <script src="js/external/form-element.js"></script>
        <!-- Form validation -->
        <script src="js/form.js"></script>

        <!-- Custom -->
        <script src="js/custom.js"></script>

</body>
</html>